<template>
  <div class="nav">
    <span class="tag">数据详情</span>
<!--    <el-button @click="test">test</el-button>-->
    <div class="box">
      <el-table
          :data="tableData"
          :header-cell-style="{background:'#eef1f6',}"
          border
          style="width: 100%">
        <el-table-column prop="num" label="答题序号" align="center" width="100">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="100">
        </el-table-column>
        <el-table-column prop="score" label="得分" align="center" width="100">
        </el-table-column>
        <el-table-column prop="starttime" label="开始时间" align="center" width="300">
        </el-table-column>
        <el-table-column prop="endtime" label="提交时间" align="center" width="300">
        </el-table-column>
        <el-table-column prop="longtime" label="答题时长" align="center" width="200">
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button @click="scoreClick(scope.row)" type="text" size="small">评分</el-button>
            <el-button @click="lookClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
export default {
  name: "DateDetail",
  props: ["msg"],
  data(){
    return{
      num: [],
      // tableData: [{
      //   num: 1,
      //   name: '小虎',
      //   score: 89,
      //   starttime: '2021-6-27 15:47:30',
      //   subtime: '2021-6-27 15:47:30',
      //   longtime: '3分3秒'
      // }, {
      //   num: 2,
      //   name: '小跳',
      //   score: 59,
      //   starttime: '2021-6-27 15:47:30',
      //   subtime: '2021-6-27 15:47:30',
      //   longtime: '4分3秒'
      // }]
      tableData: [],
    }
  },
  computed: {
    getReport(){
      return this.$store.state.reportDate
    }
  },
  watch: {
    getReport(){
      this.tableData = this.$store.state.reportDate.reportDate.data.dataDetail
    },


  },
  created() {
    localStorage.getItem("testMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("testMsg"))));
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("testMsg",JSON.stringify(this.$store.state))
    })
  },
  methods: {
    // test(){
    //   console.log(this.tableData)
    //   console.log(this.$store.state.reportDate.reportDate.data.dataDetail)
    // },

    getNum(){
      for (let i in this.tableData){
        this.num.push(this.tableData[i].num)
      }
    },
    scoreClick(row) {
      console.log(row)
      this.getNum()
      console.log(this.num)
      this.$store.commit('getContent',{
        content: this.msg
      });
      this.$store.commit('getNum',{
        num: this.num
      });
      this.$router.push({
        path: '/JudgeScore',
        query: {
          row: row,
          ha: row.num,
        }
      })

    },
    lookClick(row) {
      console.log(row)
      this.getNum()
      this.$store.commit('getContent',{
        content: this.msg
      });
      this.$store.commit('getNum',{
        num: this.num
      });
      this.$router.push({
        path: '/AnswerDetail',
        query: {
          row: row,
          ha: row.num,
        }
      })
    }
  }
}
</script>

<style scoped>
.nav {
  height: 800px;
  width: 1300px;
  margin: 0 auto;
}
.nav .tag {
  border-left: 3px solid #B3C0D1;
  padding-left: 5px;
  color: #484848;
  font-size: 17px;
}
.nav .box {
  width: 100%;
  background: #fff;
  margin: 15px 0;
  box-shadow: 0 2px 4px 0 #ecebeb;
  border-radius: 4px;
  padding: 25px 25px;
  box-sizing: border-box;
  color: #707070;

}

</style>
